<template>
  <div class="vue-container">
  <div class="vue-player">
    <video  x5-playsinline="true" :controls='state.playing' class="vue-player-video"  webkit-playsinline="true" playsinline="true" preload="none" :src="v.url"></video>
    <div v-show='!state.playing' class="cover" v-bind:style = "v.cover"></div>
    <div v-show='!state.playing' class="play-button" @click="play"></div>
  </div>
  </div>
</template>
<style lang="scss">
  @import "../assets/scss/detail.scss";
</style>
<script>
  export default {
    name:'my-video',
    props:{

      url:{
        type:String,
        default:''
      },
      shouldBeStop:{
        type:Function
      }
    },
    mounted(){

      this.initPlayer();
    },

    data(){
      return {
        $video: null,
        player: {
          $player: null,
        },
        state: {
          playing: false,
        },
        v:{
          url:this.url
          ,
          cover:''
        }
      }
    },methods:{
      play(){
        this.state.playing = !this.state.playing;
        let vm=this;
        if (this.$video) {
          if (this.state.playing) {
            this.$video.play();

            this.$video.addEventListener('timeupdate', (e)=>{


              let c=this.$video.currentTime;
              let d=this.$video.duration;

              //如果是
              if(vm.shouldBeStop(c,d)){
                vm.state.playing=false;
                this.$video.pause()

              }


            });
            this.$video.addEventListener('ended', (e) => {
              this.state.playing = false
              this.$video.currentTime = 0
            })
          } else {
            this.$video.pause()
          }
        }
      },
      initPlayer() {
        this.$video = this.$el.getElementsByTagName('video')[0];
        const $player = this.$el.getElementsByClassName('vue-player-video')[0];
        this.player.$player = $player
      },
    }
  }
</script>
